<!DOCTYPE html>

<html lang="en">
  <head>
    <title>CatCat</title>
    <meta charset="utf-8" />
  </head>

  <body>
    <h2>CatPhotoApp</h2>
    <main>
      <a href="#footer">Jump to Bottom.</a> <br />
      <a href="#">
        <img
          src="./relaxing-cat.jpg"
          alt="A cute orange cat lying on its back."
        />
      </a>
      <div>
        <p>Things cats love:</p>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <p>Top 3 things cats hate:</p>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
      </div>
      <form id="cat-photo-form" action="/submit-cat-photo">
        <label for="indoor">
          <input
            id="indoor"
            value="indoor"
            type="radio"
            name="indoor-outdoor"
            checked
          />Indoor
        </label>
        <label for="outdoor">
          <input
            id="outdoor"
            value="outdoor"
            type="radio"
            name="indoor-outdoor"
          />Outdoor
        </label>
        <br />
        <label for="loving">
          <input
            id="loving"
            value="loving"
            type="checkbox"
            name="personality"
            checked
          />Loving
        </label>
        <label for="hating">
          <input
            id="hating"
            value="hating"
            type="checkbox"
            name="personality"
          />Hating
        </label>
        <label for="evil">
          <input
            id="evil"
            value="evil"
            type="checkbox"
            name="personality"
          />Evil
        </label>
        <br />
        <input type="text" placeholder="cat photo URL" required />
        <button type="submit">
          Submit
        </button>
      </form>
    </main>

    <footer id="footer">Copyright Cat Photo App</footer>
  </body>
</html>
